<!-- 
组件的引用例子：
import Emoji from 'components/game/comment/Emoji'

<emoji ref='emoji' v-on:clickEmoji='sendEmoji' v-show='showEmoji'></emoji>


	点击表情会触发clickEmoji事件，并传递表情数据，数据封装为：
	{
		type: 1,
		path: "value",  表情的图片地址
    text: "value", 消息的文本,格式为“[土豪]”,发送给后台均发送文本，显示时才显示图片
	}

	若需要将文本消息转换为包含表的内容，则调用str2Emoji方法，例如this.$refs.emoji.str2Emoji(data[i].COMMUNITY_CONTENT)
 -->

<template>
	<div class="chat-emoji-container-wrap">
		<swiper :height='swiperH' dots-position="center">
			<swiper-item v-for='(item, pageNo) in pageNum' :key='pageNo' class='page'>
		    <img v-bind:src="emojiItem.path" v-for='emojiItem in emojis[pageNo]' class="emoji_item" @click='clickEmoji(emojiItem)' ref='emojiImg'/>
			</swiper-item>
		</swiper>
	</div>
</template>

<script>
	import { Swiper, SwiperItem } from 'components/swiper';
	import EmojiUtil from 'components/game/comment/EmojiUtil';
	export default{
		components:{
			Swiper, SwiperItem
		},
		data(){
			return{
				emojiUtil: null,
				emojis:[],
				pageSize: 8,
				pageNum: 0,
				swiperH: '200px'
			}
		},
		created: function () {
			// body...
			this.loadEmoji();
		},
		methods: {
			loadEmoji(){
				this.emojiUtil = new EmojiUtil(true);
				var allEmoji = this.emojiUtil.getEmojis();
				this.pageNum = Math.ceil(allEmoji.length / this.pageSize);
				var subPage = [];
				for(let i = 0; i<allEmoji.length; i++){
					if(i % this.pageSize == 0 && i != 0){
						this.emojis.push(subPage);
						subPage = [];
					}
					subPage.push(allEmoji[i]);
				}
				this.emojis.push(subPage);	
			},
			clickEmoji(e){
				if(this.msgContainer != ''){
					this.$emit('clickEmoji', e);
				}
			},
			/**
     	 * 利用Emoji的str2Emoji方法，将str转换为包含表情的富文本
			 * @param  {String} str 要转换的string
			 */
			str2Emoji(str){
				if(this.emojiUtil != null){
					return this.emojiUtil.str2Emoji(str);
				}
			}
		}
	}
</script>

<style scoped>
.chat-emoji-container-wrap .emoji_item {
  border: none;
  width: 25%;
}
.page{
	overflow-y: scroll;
}
</style>